<script>
import { provide, render } from 'vue'
import { useVModel } from '@vueuse/core'
export default {
    name:'XtxTabs',
    props:{
        ModelValue:{
            type:String,
            default:''
        }
    },
    setup(props,{emit}){
        const activeName = useVModel(props,'ModelValue',emit)
        // 传值给子组件
        provide('activeName',activeName)
        // 通知父组件
        const tabClick = (name,index) => {
            activeName.value = name
            emit('on-click',{name,index})
        }
        // {active:item.props.name === this.activeName}
        return {activeName, tabClick}
    },
    render(){
        // 1.获取默认插值内容
        const defaultSlot = this.$slots.default()
        const Panels = []
        // console.log(defaultSlot,"w s ");
        defaultSlot[0].children.forEach(item=>{
            // console.log(item,'item123')

            // 不是动态生成 children
            // if(item.type.name === 'XtxTabsPanel'){
                Panels.push(item)
              
            // }else{
                // console.log(item,'item.children')

                // item.children.forEach(com => {
                //     Panels.push(com)
                // })
                // console.log(item,'item')
                // console.log(item instanceof Array)
            // }
            
        })
        // 2.创建HTML
        const nav = (
            <nav>
            {Panels.map((item,i)=>{
                return <a href="javascript:;" onClick={() => this.tabClick(item.props.name,i)} className={{active:item.props.name === this.activeName}}>{item.props.label}</a>
            })}
            
            </nav>
        )
        return <div class="xtx-tabs" v-if="defaultSlot">{[nav,Panels]}</div>
        
    }
}
</script>


<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>